<template>
  <div id="navigation">
    <!-- 导航栏 -->
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b" >
      <el-menu-item index="">全部</el-menu-item>
      <el-menu-item index="1">电子产品</el-menu-item>
      <el-menu-item index="2">男装服饰</el-menu-item>
      <el-menu-item index="3">女装服饰</el-menu-item>
      <el-menu-item index="4">家电产品</el-menu-item>
      <el-menu-item index="5">图书音像</el-menu-item>
      <!-- <el-menu-item index="6">零食水果</el-menu-item> -->
      <el-menu-item index="7">美妆彩妆</el-menu-item>
      <el-menu-item index="6">其他</el-menu-item>
      <el-menu :default-active="activeIndex1" class="el-menu-demo ul2" mode="horizontal" @select="handleSelect1" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="g" class="goods">商品帖</el-menu-item>
        <el-menu-item index="w" class="seek">求购帖</el-menu-item>
      </el-menu>
      
      <!-- <el-menu-item index="5" class="seek_detail">求购帖</el-menu-item> -->
      <!-- <el-menu-item index="/home/release" class="release">发布商品</el-menu-item> -->
      <!-- <el-menu-item index="/home/release">发布商品</el-menu-item>
      <el-menu-item index="/home/seek">求购商品</el-menu-item> -->
    </el-menu>
    

    <div class="container">
      <!-- <keep-alive>
        <router-view/>
      </keep-alive> -->
      <ul>
        <li v-for="(items, index) in ulData.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="items.goodsWant.goodsWantInfo" class="items">
          <div class="picture"><a style="cursor: pointer" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)"><img :src="items.goodsWant.goodsWantImage" alt=""></a></div>
          <div class="items_detail">
            <div class="price"><strong>￥{{items.goodsWant.goodsWantPrice}}</strong><span>{{items.goodsWant.browsedCount}}人浏览</span></div>
            <div class="detail"><a style="cursor: pointer" @click="goodsClick(items.goodsWant.goodsWantId, items.goodsWant.goodsWant)">{{items.goodsWant.goodsWantInfo}}</a></div>
            <div style="padding: 0 5px">
              <i v-if="$store.state.goodsWant === 'g'" class="el-icon-shopping-cart-2" title="点击添加购物车" style="float: left; cursor: pointer" @click="cartClick(items.goodsWant.goodsWantId)"></i>
              <i v-if="!!!items.favoriteId" class="el-icon-collection" title="点击添加收藏" style="float: right; cursor: pointer" @click="collectionClick(items.goodsWant.goodsWantId, items.favoriteId, index)"></i>
              <i v-else class="el-icon-collection" title="点击取消收藏" style="float: right; cursor: pointer; color: red" @click="collectionClick(items.goodsWant.goodsWantId, items.favoriteId, index)"></i>
            </div>
          </div>
        </li>
      </ul>
      <el-pagination background @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" 
                :page-size="pagesize"  layout="total, prev, pager, next, jumper"  :total="ulData.length" prev-text="上一页" 
                next-text="下一页" style="text-align: center; position: absolute; bottom: 20px; left: 480px;">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {request} from '@/network/request'
import qs from 'qs'

export default {
  data() {
    return {
      // activeIndex: 'all',
      // activeIndex1: 'g',
      // 默认显示页面为1
      currentPage: 1, 
      // 每页的数据条数
      pagesize: 15, 
      ulData: [
        // {favoriteId: '', goodsWant: {goodsWantImage: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/199/O1CN01caGOMh1DLBSakR6Mt_!!199-0-lubanu.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面包整箱'}},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/1791258654/O1CN01q62ITh2DnaBEAUfKy_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养食品休闲小吃面包整箱'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/2207869214346/O1CN01PpcQzR1hyVwhE4Xgu_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海芝士夹心营养早餐零食品休闲小吃面包整箱'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/1792980179/O1CN01dImpPH1DC1XaDrBNX_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃整箱'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/1919630388/O1CN01kIM0oA1EjkJkgG4uu_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面包整箱'},
        // {goodsWantImage: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i4/2206421857309/O1CN01cXItC323rZUDuS5T9_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休吃面包整箱'},
        // {goodsWantImage: 'https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2200565906191/O1CN01OYk6ab1vbWf5yCS0d_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹养早餐零食品休闲小吃面包整箱12'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱1'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱2'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱3'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱4'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱5'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱6'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱7'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱8'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱9'},
        // {goodsWantImage: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/3254510148/O1CN01qZRFBk1CxpGIH6QzG_!!0-item_pic.jpg_250x250.jpg_.webp', goodsWantPrice: '10', browsedCount: '400', goodsWantInfo: '玛呖德蒸蛋糕海盐半熟芝士夹心营养早餐零食品休闲小吃面箱10'},
      ]
    };
  },
  computed: {
    activeIndex() {
      return this.$store.state.sortId
    },
    activeIndex1() {
      return this.$store.state.goodsWant
    }
  },
  methods: {
    // 点击类别时，更改状态中的sortId，并且向服务器发送sortId和goodsWant
    handleSelect(key, keyPath) {
      this.$store.commit('changeSortId', key)
      let conditionStr = JSON.stringify({
        sortId: this.$store.state.sortId,
        goodsWant: this.$store.state.goodsWant,
        userId: this.$store.state.userId
      })
      request({
        url: '/goods-want/searchGoods',
        method: 'post',
        data: conditionStr
      }).then(res => {
        // console.log(res);
        this.ulData = res.data.data.items
      }).catch(err => {
        console.log(err);
      })
    },
    // 点击商品帖或购物帖时，更改状态中的goodsWant，并且向服务器发送sortId和goodsWant
    handleSelect1(key, keyPath) {
      this.$store.commit('changeGoodsWant', key)
      let conditionStr = JSON.stringify({
        sortId: this.$store.state.sortId,
        goodsWant: this.$store.state.goodsWant,
        userId: this.$store.state.userId
      })
      request({
        url: '/goods-want/searchGoods',
        method: 'post',
        data: conditionStr
      }).then(res => {
        // console.log(res);
        this.ulData = res.data.data.items
      }).catch(err => {
        console.log(err);
      })
      // if(key === 'w') {
      //   this.ulData = [
      //     {imgSrc: '',
      //       price: '50', views: '300', descrip: '商品求购'
      //     }
      //   ]
      // }
    },
    //每页下拉显示数据
    handleSizeChange(size) {
      this.pagesize = size;
      /*console.log(this.pagesize) */
    },
    //点击第几页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      /*console.log(this.currentPage) */
    },
    // 点击商品图片或者文字连接，改变状态中的商品ID -> goodsId，改变状态中的goodsWantDetail，跳转到商品详情页面
    goodsClick(goodsWantId, goodsWant) {
      this.$store.commit('changeGoodsId', goodsWantId)
      this.$store.commit('changeGoodsWantDetail', goodsWant)
      // console.log(goodsWantId);
      this.$router.push('/goodsDetail')
    },
    cartClick(goodsWantId) {
      if(!this.$store.state.isLogin) {
        alert('您还未登录，请先登录！！')
        this.$router.push('/login')
      } else {
        // 点击添加购物车，向服务器发送请求
        let obj = JSON.stringify({
          goodsWantId,
          needCount: 1,
          userId: this.$store.state.userId
        })
        request({
          url: '/shoppingcart/addToCart',
          method: 'post',
          data: obj
        }).then(res => {
          // console.log(res);
          this.$message({
            message: '添加购物车成功！',
            type: 'success'
          })
        }).catch(err => {
          console.log(err);
        })
      }
    },
    collectionClick(goodsWantId, favoriteId, index) {
      if(!this.$store.state.isLogin) {
        alert('您还未登录，请先登录！！')
        this.$router.push('/login')
      } else {
        // 点击收藏，向服务器发送请求
        let favorite = JSON.stringify({
          goodsWantId,
          userId: this.$store.state.userId
        })
        request({
          url: '/favorite/addToFavorite',
          method: 'post',
          data: favorite
        }).then(res => {
          // console.log(res);
          if(res.data.flag) {
            // 未收藏时显示添加收藏成功
            if(!!!favoriteId) {
              this.$message({
                message: '添加收藏成功！',
                type: 'success'
              })
              this.ulData[index].favoriteId = '1'
            // 收藏时显示取消收藏成功
            } else {
              this.$message({
                message: '取消收藏成功！',
                type: 'success'
              })
              this.ulData[index].favoriteId = ''
            }
            // 重新请求数据，更新页面数据
            // let obj = JSON.stringify({
            //   sortId: this.$store.state.sortId,
            //   goodsWant: this.$store.state.goodsWant,
            //   userId: this.$store.state.userId
            // })
            // return request({
            //   url: '/goods-want/searchGoods',
            //   method: 'post',
            //   data: obj
            // })
            // .then(res => {
            //   console.log(res);
            //   this.ulData = res.data.data.items
            // }).catch(err => {
            //   console.log(err);
            // });
          }
        }, err => {
          console.log(err);
        })
        // .then(res => {
        //   // console.log(res);
        //   this.ulData = res.data.data.items
        // }, err => {
        //   console.log(err);
        // })
      }
    }
  },
  // 一进到主页，向服务器发请求，初始只发商品贴类型，即是类别为全部的商品贴
  mounted() {
    let obj = JSON.stringify({
      sortId: this.$store.state.sortId,
      goodsWant: this.$store.state.goodsWant,
      userId: this.$store.state.userId
    })
    request({
      url: '/goods-want/searchGoods',
      method: 'post',
      data: obj
    }).then(res => {
      // console.log(res);
      this.ulData = res.data.data.items
    }).catch(err => {
      console.log(err);
    });
  }
}
</script>

<style scoped>
  #navigation {
    background-color: #f2f2f2;
  }

  #navigation .el-menu-demo {
    /* padding-left: 50px; */
    width: 70%;
    margin: 0 auto;
  }

  #navigation .container {
    width: 70%;
    /* height: 1245px; */
    margin: 0 auto;
    border: 1px solid black;
    margin-top: 10px;
    padding-bottom: 60px;

    position: relative;
  }

  #navigation .ul2 {
    position: relative;
    width: 164px;
    height: 59px;

    margin-left: 80%;
  }

  #navigation .ul2 .el-menu-item {
    width: 82px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }

  #navigation .ul2 .goods {
    position: absolute;
    left: 0;
  }

  #navigation .ul2 .seek {
    position: absolute;
    right: 0;
  }

  #navigation .container ul {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }

  #navigation .container .items {
    width: 250px;
    height: 390px;
    flex: none;
    /* box-sizing: border-box; */
    /* border: 1px solid #000; */
  }

  #navigation .container .items:not(:nth-child(5n)) {
    /* margin-right: calc((70% - 1250px) / 4); */
    margin-right: calc(6% / 4);
  }

  #navigation .container .items .picture img {
    width: 250px;
    height: 250px;
  }

  #navigation .container .items .items_detail {
    border: 1px solid #ccc;
    border-top: none;
    /* padding-top: 8px; */
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
  }

  #navigation .container .items .items_detail .price {
    color: red;
    padding: 0 5px;
    height: 26px;
    line-height: 26px;
    margin: 10px 0;
  }

  #navigation .container .items .items_detail i:hover {
    color: red;
  }

  #navigation .container .items .items_detail .price strong {
    float: left;
  }

  #navigation .container .items .items_detail .price span {
    float: right;
    color: #888888;
    font-size: 12px;
  }

  #navigation .container .items .items_detail .detail {
    margin-bottom: 5px;
    height: 42px;
    line-height: 15px;
  }

  #navigation .container .items .items_detail .detail a {
    font-size: 12px;
    text-decoration: none;
    color: inherit;
  }

  #navigation .container .items .items_detail .detail a:hover {
    color: #f00;
    text-decoration: underline;
  }
</style>